<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="1" :offset="18">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="goPreview">预览</el-button>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="add">保存</el-button>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="executeFlow">下发</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick"  type="border-card">
      <el-tab-pane label="模型配置" name="model">
        <G6Editor mode="edit">

        </G6Editor>
      </el-tab-pane>
      <el-tab-pane label="过滤条件" name="condition">
        <Condition ref="condition">
        </Condition>
      </el-tab-pane>
      <el-tab-pane label="字段设置" name="column">
        <Column ref="column"></Column>
      </el-tab-pane>
      <el-tab-pane label="预览页面" name="fourth">
        <preview mode="preview">
        </preview>
      </el-tab-pane>

      <el-tab-pane label="异常报告" name="five">
        <Ecpection mode="Ecpection">

        </Ecpection>


      </el-tab-pane>
    </el-tabs>

    <el-dialog
            title="上线提示"
            :visible.sync="dialogVisible"
            width="30%"
            >
      <el-form :label-position="labelPosition" label-width="80px" :model="formData">
        <el-form-item label="调度时间">
          <el-time-select
            v-model="formData.rule"
            :picker-options="{
              start: '00:15',
              step: '00:15',
              end: '22:30'

            }"
            placeholder="选择时间">
          </el-time-select>
          
        </el-form-item >

        <el-form-item label="跑批频率">
          <el-radio-group v-model="formData.frequecy">
            <el-radio-button label="一次运行"></el-radio-button>
            <el-radio-button label="每天运行"></el-radio-button>
            <el-radio-button label="季度运行"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="预警周期">
          <el-input v-model="formData.time" type="number" style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="模型名称">
          <el-input v-model="formData.name"  style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">下 发</el-button>
      </span>
    </el-dialog>

    <el-dialog
            title="保存"
            :visible.sync="addDialogVisible"
            width="30%"
            >
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item label="模型名称">
          <el-input v-model="form.name"  style="width: 220px"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
            title="下线"
            :visible.sync="removeDialogVisible"
            width="30%"
            >
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item label="下线日期">
          <el-date-picker
            v-model="remove.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upLine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import G6Editor from './components/G6Editor'
import Condition from './components/Condition'
import Column from './components/Column'
import preview  from './components/preview'
import Ecpection  from './components/Ecpection'
export default {
  name: 'app',
  components:{G6Editor,Condition,Column,preview,Ecpection},
  data() {
      return {
        labelPosition: 'right',
          addDialogVisible:false,
          form:{
              name:''
          },
          formData:{
              rule:'',
              time:'',
              name:'',
              frequecy:''
          },
          remove:{
            date:''
          },
          dialogVisible:false,
          removeDialogVisible: false,
          value3:'',
        activeName: 'model'
      };
    },
    methods: {
      add(){
           this.addDialogVisible=true

        },
        save(){
            this.addDialogVisible=false
            this.$message({
                message: '已保存',
                type: 'success'
            });
        },
        removeLine(){
          this.removeDialogVisible = true
        },
        upLine(){

            this.$message({
                message: '正在下线,并进入下线流程',
                type: 'success'
            });
            this.removeDialogVisible = false
        },
        executeFlow(){ // 下发
          //  this.dialogVisible=true
          this.$message({
                message: '已进入下发流程',
                type: 'success'
            });
        } ,

        goPreview()
        {
            this.activeName='fourth'
        },
      handleClick(tab) {
        this.activeName = tab.name
        if(tab.name==='condition'){// 过滤条件
          this.$refs.condition.bindVal()
        }else if(tab.name==='column'){// 过滤条件
          this.$refs.column.bindVal()
        }
    }
    }
}

</script>

<style>
html, body {
    overflow: hidden;
    margin: 0;
    font-size: 12px;
}
#app{
  margin: 0;
  padding: 0;
}

</style>
<style scoped>
.el-row {
    margin-top: 10px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
